<div class="col-lg-12">
  <section class="panel">
    <header class="panel-heading">设备信息 <i class="icon-info-sign text-muted" data-toggle="popover" data-html="true" data-placement="top" data-content="The datagrid use ajax to load the data. please put this file on a server to preview." title="" data-trigger="hover" data-original-title="Help"></i> </header>
    <div class="pull-out">
      <table id="MyStretchGrid" class="table table-striped datagrid m-b-small">
        <thead>
          <tr>
            <th>
              <div class="row">                        
                <div class="col-lg-8">
                  <div class="select filter m-b-small m-t-small" data-resize="auto">
                    <button data-toggle="dropdown" class="btn btn-small btn-white dropdown-toggle">
                      <span class="dropdown-label"></span>
                      <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                      <li data-value="all" data-selected="true"><a href="#">所有</a></li>
                      <li data-value="online"><a href="#">在线设备</a></li>
                      <li data-value="offline"><a href="#">离线设备</a></li>
                    </ul>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="input-group search datagrid-search m-t-small">
                    <input type="text" class="input-small form-control" placeholder="Search">
                    <div class="input-group-btn">
                      <button class="btn btn-white btn-small"><i class="icon-search"></i></button>
                    </div>
                  </div>
                </div>
              </div>
            </th>
          </tr>
        </thead>

        <tfoot>
          <tr>
            <th class="row">
              <div class="datagrid-footer-left col col-lg-6 text-center-sm" style="display:none;">
                <div class="grid-controls m-t-small">
                  <span>
                    <span class="grid-start"></span> -
                    <span class="grid-end"></span> of
                    <span class="grid-count"></span>
                  </span>
                  <div class="select grid-pagesize dropup" data-resize="auto">
                    <button data-toggle="dropdown" class="btn btn-small btn-white dropdown-toggle">
                      <span class="dropdown-label"></span>
                      <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                      <li data-value="5" data-selected="true"><a href="#">5</a></li>
                      <li data-value="10"><a href="#">10</a></li>
                      <li data-value="20"><a href="#">20</a></li>
                      <li data-value="50"><a href="#">50</a></li>
                      <li data-value="100"><a href="#">100</a></li>
                    </ul>
                  </div>
                  <span>Per Page</span>
                </div>
              </div>
              <div class="datagrid-footer-right col col-lg-6 text-right text-center-sm" style="display:none;">
                <div class="grid-pager">
                  <button type="button" class="btn btn-small btn-white grid-prevpage"><i class="icon-chevron-left"></i></button>
                  <span>Page</span>
                  <div class="inline">
                    <div class="input-group dropdown combobox">
                      <input class="input-small form-control" type="text">
                      <div class="input-group-btn dropup">
                        <button class="btn btn-small btn-white" data-toggle="dropdown"><i class="caret"></i></button>
                        <ul class="dropdown-menu pull-right"></ul>
                      </div>
                    </div>
                  </div>
                  <span>of <span class="grid-pages"></span></span>
                  <button type="button" class="btn btn-small btn-white grid-nextpage"><i class="icon-chevron-right"></i></button>
                </div>
              </div>
            </th>
          </tr>
        </tfoot>
      </table>
    </div>
  </section>
<!--           <section class="panel">
    <header class="panel-heading">DataTables <i class="icon-info-sign text-muted" data-toggle="popover" data-html="true" data-placement="top" data-content="The datatables use ajax to load the data. please put this file on a server to preview." title="" data-trigger="hover" data-original-title="Help"></i> </header>
    <div class="pull-out">
      <table class="table table-striped m-b-none" data-ride="datatables">
        <thead>
          <tr>
            <th width="20%">Rendering engine</th>
            <th width="25%">Browser</th>
            <th width="25%">Platform(s)</th>
            <th width="15%">Engine version</th>
            <th width="15%">CSS grade</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </section> -->
</div>